<script setup>

import { mainStore } from '../stores/index'
import { onMounted, ref } from 'vue'

const store = mainStore();

const onThmem = () => {
  let theme = localStorage.getItem("theme");
  // alert(theme)
  if (theme) {
    document.body.className = (theme == 'dark' ? 'light-scheme' : 'dark-scheme');
    localStorage.setItem('theme', theme == 'dark' ? 'light' : 'dark')
  } else {
    const mq = window.matchMedia('(prefers-color-scheme: dark)');
    document.body.className = (mq ? 'light-scheme' : 'dark-scheme');
    localStorage.setItem('theme', mq ? 'light' : 'dark')
  }

}


onMounted(() => {
  let theme = localStorage.getItem("theme");
  if (theme) {
    document.body.className = (theme == 'dark' ? 'dark-scheme' : 'light-scheme');
  } else {
    const mq = window.matchMedia('(prefers-color-scheme: dark)');
    document.body.className = (mq ? 'dark-scheme' : 'light-scheme');

  }
})




</script>

<template>
  <div>
    <button @click="onThmem">主题切换</button>
  </div>
</template>

<style scoped></style>
